$(function () {
  const baseURL = 'http://localhost:8080/api/v1'
  //日新增文章数量统计
  chart01()
  function chart01() {
    // 通过 ajax 请求获取文章统计数据
    $.ajax({
      method: 'GET',
      url: baseURL + '/admin/data/article',
      success: (res) => {
        console.log(res.date)
        // X轴的数据
        const xAxisData = []
        res.date.forEach((item) => {
          xAxisData.push(item.date)
        })
        // 系列图表的数据
        const seriesData = []
        res.date.forEach((item) => {
          seriesData.push(item.count)
        })
        // console.log({ xAxisData, seriesData })
        loadEchars({ xAxisData, seriesData })
      },
    })
    // 直接把传递过来的对象解构出两个数据
    function loadEchars({ xAxisData, seriesData }) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('curve_show'))

      option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: '日新增文章数',
        },
        xAxis: {
          name: '日',
          type: 'category',
          data: xAxisData,
          boundaryGap: false,
        },
        legend: {
          data: ['新增文章'],
          top: '40'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          },
          right: 50
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        series: [
          {
            name: '新增文章',
            data: seriesData,
            type: 'line',
            smooth: true,
            // symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#f80'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255,136,0,0.39)'
              }, {
                offset: .34,
                color: 'rgba(255,180,0,0.25)'
              },
              {
                offset: 1,
                color: 'rgba(255,222,0,0.00)'
              }])
            },
          },
        ],
      }

      myChart.setOption(option)
    }
  }
  //各类型文章数量统计
  chart02()
  function chart02() {
    $.ajax({
      method: 'get',
      url: baseURL + '/admin/data/category',
      data: {},
      success: (res) => {
        console.log(res.date);
        const name = []
        res.date.forEach((item) => {
          name.push(item.name)
        })
        // 系列图表的数据
        const articles = []
        res.date.forEach((item) => {
          articles.push(item.articles)
        })
        console.log({ articles, name })
        loadEchars1({ name, articles })
      }
    })
  }

  function loadEchars1({ name, articles }) {
    console.log(articles, name);
    var myChart1 = echarts.init(document.getElementById('pie_show'));

    option1 = {
      title: {
        left: 'center',
        text: '分类文章数量比',
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'horizontal',
        x: 'center',
        data: name,
        top: 30
      },
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
      series: [
        {
          name: '分类名称',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          data: [
            { value: articles[0], name: name[0] },
            { value: articles[1], name: name[1] },
            { value: articles[2], name: name[2] },
            { value: articles[3], name: name[3] },
            { value: articles[4], name: name[4] }
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
  }
  // 柱状图,没数据

  loadEchars02()
  function loadEchars02() {
    var myChart2 = echarts.init(document.getElementById('column_show'));

    option2 = {
      title: {
        left: 'center',
        text: '分类访问量',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
        },

      },
      legend: {
        data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
        top: 30
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['一月', '二月', '三月', '四月']
          // data: xAxisData
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
      series: [
        {
          name: '爱生活',
          type: 'bar',
          data: [320, 332, 301, 334]
        },
        {
          name: '趣美味',
          type: 'bar',
          data: [220, 132, 101, 134]
        },
        {
          name: '爱旅行',
          type: 'bar',
          data: [220, 182, 191, 234]
        },
        {
          name: '爱电影',
          type: 'bar',
          data: [150, 232, 201, 154]
        },
        {
          name: '爱游泳',
          type: 'bar',
          data: [262, 118, 364, 426],
        },

      ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
  }

  $.ajax({
    method: 'get',
    url: baseURL + '/admin/data/info',
    data: {},
    success: (res) => {
      console.log(res);
      $('.totalArticle').html(res.totalArticle);
      $('.dayArticle').html(res.dayArticle);
      $('.totalComment').html(res.totalComment);
      $('.dayComment').html(res.dayComment);
    }
  })
})
